<!--
 * @Author: Hong Yiqun
 * @LastEditors: Hong Yiqun
-->
<template>
  <el-dialog
    title="新增"
    :visible.sync="dialogVisible"
    :before-close="closeDialog"
    width="898px"
    :close-on-click-modal="false"
    center
  >
    <div class="content-wrap">
      <el-form ref="form" :model="data" :rules="rules" label-width="100px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="data.title"></el-input>
        </el-form-item>

        <el-form-item label="小标题" prop="subtitle">
          <el-input v-model="data.subtitle"></el-input>
        </el-form-item>

        <el-form-item label="作者" prop="author">
          <el-input v-model="data.author"></el-input>
        </el-form-item>

        <el-form-item label="分类id" prop="categoryId">
          <!-- <el-input v-model="data.categoryId"></el-input> -->
          <el-select v-model="data.categoryId" placeholder="请选择">
            <el-option
              v-for="item in categories"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="排序" prop="sort">
          <el-input v-model="data.sort"></el-input>
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-input v-model="data.status"></el-input>
        </el-form-item>

        <el-form-item label="置顶" prop="top">
          <el-switch v-model="data.top"> </el-switch>
        </el-form-item>

        <el-form-item label="图片" prop="top">
          <el-upload
            class="avatar-uploader"
            name="files"
            list-type="picture-card"
            :with-credentials="true"
            :action="apis._api_file_upload"
            :show-file-list="true"
            :http-request="uploadHttpDefault"
            :on-success="onUploadSuccess"
            :file-list="fileList"
            :limit="1"
            :on-exceed="onExceed"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="内容" prop="content">
          <editor v-model="data.content"></editor>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import editor from "./editor";
import { merge, get } from "lodash";
import createFunc from "../mixins/createFunc";
import apis from "@/apis";
import file from "../mixins/file";

export default {
  mixins: [createFunc, file],
  props: {

    createApi: {
      type: String,
      default: () => apis._api_cms_content_createContent,
    },

    detailApi: {
      type: String,
      default: () => apis._api_cms_content_getContentById,
    },
    editApi: {
      type: String,
      default: () => apis._api_cms_content_updateContent,
    },
  },
  components: {
    editor,
  },
  data() {
    let defaultForm = {
      title: "",
      subtitle: "",
      author: "",
      categoryId: "",
      // id: "string",
      imgPath: "",
      sort: 0,
      status: 0,
      top: true,
      content: "",
    };
    let form = merge({}, defaultForm, this.value);
    return {
      data: form,
      rules: {
        author: [{ required: true, message: "请输入", trigger: "blur" }],
        title: [{ required: true, message: "请输入", trigger: "blur" }],
        content: [{ required: true, message: "请输入", trigger: "blur" }],
        categoryId: [{ required: true, message: "请输入", trigger: "blur" }],
      },

      categories: [],
    };
  },
  computed: {
    apis: () => apis,
    fileList() {
      return this.data.imgPath ? [{ url: this.data.imgPath }] : [];
    },
  },

  watch: {},
  created() {
    this.getAllCategories();

    this.$http.post(apis._api_cms_content_getAllContents, {
      name: "类别1",
      parentId: 0,
      sort: 0,
    });
  },

  methods: {
    getAllCategories() {
      this.$http
        .post(apis._api_cms_category_getAllCategories, {
          currPage: 1,
          size: 9999,
        })
        .then((res) => {
          // console.log(res);
          this.categories = get(res, "data.data.records");

          // this.categories = map(list,(e)=>{
          //   return {

          //   }
          // })
        });
    },

    beforeConfirm() {
      this.data.status = parseInt(this.data.status);
      this.data.sort = parseInt(this.data.sort);
      return Promise.resolve();
    },

    onUploadSuccess(res) {
      // console.log(res);
      this.data.imgPath = get(res, "data[0].url");
    },

    onExceed() {
      this.$message.error("只能上传一个文件");
    },
  },
};
</script>

<style></style>
